<template>
	<NodeWrapper :containerStyle="containerStyle" :properties="props.properties" shape="rect" class="baseNodeContainer">
		<a-row>
			<a-col :span="6">
				<a-avatar
					:src="'data:image/svg+xml;base64,' + props.properties.component.icon"
					style="width: 1em; height: 1em"
				/>
			</a-col>
			<a-col :span="12" class="ellipsis">
				<a-tooltip :title="props.properties?.basicConfig?.remark||props.text">
					{{ props.properties?.basicConfig?.remark || props.text }}
				</a-tooltip>
			</a-col>
			<a-col :span="3">
				<Tooltip
					placement="right"
					trigger="click"
					color="white"
					:overlayInnerStyle="{ width: '600px', height: '600px', overflowY: 'scroll' }"
					@click="expFlow"
				>
					<template #title>
						<span>
							<Flow
								ref="flowRef"
								:toolbarConfig="toolbarConfig"
								:childFlowFlag="true"
								:initCallBack="expFlow"
								:componentsViewConfig="componentsViewConfig"
								:floatToolbarViewConfig="floatToolbarViewConfig"
								v-if="props.model?.properties?.componentConfig?.config.process?.processVersionId"
								:id="props.model.properties.componentConfig.config.process.processVersionId"
							></Flow>
							<!-- <ComponentCollapse :lf="props.lf"></ComponentCollapse> -->
						</span>
					</template>

					<Icon>
						<template #component>
							<svg
								t="1726389192370"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="4284"
								width="1em"
								height="1em"
							>
								<path
									d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m0 234.666667a32 32 0 0 0-32 32v128H352a32 32 0 0 0 0 64h128v128a32 32 0 0 0 64 0V544h128a32 32 0 0 0 0-64H544V352a32 32 0 0 0-32-32z"
									fill="#13227a"
									p-id="4285"
								></path>
							</svg>
						</template>
					</Icon>
				</Tooltip>

				<!--
				<Icon @click="expen">
					<template #component>
						<svg
							t="1726389192370"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="4284"
							width="1em"
							height="1em"
						>
							<path
								d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m0 234.666667a32 32 0 0 0-32 32v128H352a32 32 0 0 0 0 64h128v128a32 32 0 0 0 64 0V544h128a32 32 0 0 0 0-64H544V352a32 32 0 0 0-32-32z"
								fill="#13227a"
								p-id="4285"
							></path>
						</svg>
					</template>
				</Icon> -->
			</a-col>
		</a-row>
	</NodeWrapper>
</template>

<script setup>
import {defineProps} from 'vue'
import NodeWrapper from './nodeWrapper.vue'
import Icon from '@ant-design/icons-vue'
import {Tooltip} from 'ant-design-vue'
import Flow from '@/views/process/engine/index.vue'

const props = defineProps([
	'model',
	'graphModel',
	'isSelected',
	'isHovered',
	'disabled',
	'properties',
	'text',
	'updateText',
	'isDragging'
])

const flowRef = ref();
const toolbarConfig = ref({
	viewFlag: true,
	clearViewFlag: false,
	saveViewFlag: false,
	saveAndCloseViewFlag: false,
	closeViewFlag: false
})
const componentsViewConfig = ref({
	viewFlag: false
})
const floatToolbarViewConfig = ref({
	viewFlag: false
})

const expFlow = () => {
	let childLogData = props.model.properties?.childLogData;
	if (childLogData && flowRef.value) {
		flowRef.value.batchLogAndStepStatusFormat(childLogData)
	}
}

const containerStyle = {
	width: props.model?._width + 'px',
	height: props.model?._height + 'px',
	borderRadius: '6px',
	display: 'flex',
	'justify-content': 'center',
	'align-items': 'center'
}
</script>

<style scoped lang="less">
.baseNodeContainer {
	border: 1px solid #40a9ff;
	color: black;
}

.ellipsis {
	white-space: nowrap; /* 确保文本在一行内显示 */
	overflow: hidden; /* 隐藏溢出的内容 */
	text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}
</style>
